<template>
    <div>
		<myheader></myheader>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas="datas"></Breadcrumb>

		
	<section class="featured-block text-center">
		
		<div class="container">  
			<Avatar :src="src" :width="150" fit="fill"></Avatar>
			<video id="videopic" :src="video" width="60%" height="60%" controls autoplay v-if="video" ></video>
			<br>
			<Button color='red' @click="changepic">{{mybutton}}</Button>
			<table>
				<tr	>
					<td>密码：</td>
					<td><input type="text" name="username" id="" v-model="password"></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="text" name="password" id="" v-model="password1"></td>
				</tr>
				<tr>
					<td>头像上传：</td>
					<td><input type="file" @change='upload'></td>
				</tr>
				
				<tr>
					<td>七牛云上传:</td>
					<td><input type="file" @change='upload_qiniu'></td>
					<td>
						{{LoadPercent}}
						<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="blue">
							<span slot="title"></span>
							<span slot="text">{{ loadpercent_int }}%</span>
						</Progress>
					</td>
				</tr>

				<tr>
					<td></td>
					<td>
						<Button @click="submit">提交</Button>
					</td>
					
				</tr>
				
			</table>
			<div>
				关注商品列表：
				<Checkbox :datas="goods" label="关注商品" v-model="good_value"></Checkbox>
				<br>
				<Button color='green' @click='flow'>批量操作</Button>
			</div>
		</div>
	</section>
		<myfooter></myfooter>
    </div>
</template>


<script>
import myheader from './myheader';
import myfooter from './myfooter';
import {config,formatXml} from '../config'
export default {
	name:"myprofile",
	components:{
		'myheader':myheader,
		'myfooter':myfooter,
	},
    data () {
    return {
		msg: "这是一个变量",
		datas:[{title:'首页',route:{name:'index'}},
				{title:"我的首页"}
				],
		password:'',
		password1:'',
		src:'',
		video:'',
		//七牛上传凭证
		qiniu_token:'',
		img_list:['png','jpg','jpeg','bmp'],
		video_list:['mp4','avi','mov','flv'],
		LoadPercent:'',
		//整形进度条
		loadpercent_int:0,
		//切换按钮变量
		mybutton:'进入画中画',
		//商品关注列表
		goods:[],		//所有的
		good_value:[],		//点选后剩下的
		myid:{},
    }
    },
    mounted:function(){
		//获取商品列表
		this.get_goods()

		//获取token
		this.get_uptoken()

		//获取用户头像
		this.axios({
			url:'http://127.0.0.1:8000/userinfo/',
			params:{
				uid:localStorage.getItem("uid"),
				jwt:localStorage.getItem("jwt"),
			}
		}).then(resp=>{
			this.src = 'http://q79ixndz4.bkt.clouddn.com/'+resp.data.img
		})
	},
	methods:{
		//批量操作
		flow(){
			var goods = [];
			for(let i=0,l=this.good_value.length;i<l;i++){
				goods.push(this.myid[this.good_value[i]]);
			}
			var glist = JSON.stringify(goods);
			console.log(glist);

			this.axios({
				url:'http://127.0.0.1:8000/goodfollow/',
				params:{
					'uid':localStorage.getItem("uid"),
					'ids':glist,
					type:2,		//批量取关
				}
			}).then(resp=>{
				console.log(resp)
				this.$Message(resp.data.message)
			})
		},
		//获取关注商品
		get_goods(){
			this.axios({
				url:'http://127.0.0.1:8000/uidfollow/',
				params:{
					'uid':localStorage.getItem("uid")
				}
			}).then(resp=>{
				console.log(resp)
				var goods = []
				for (let index = 0; index < resp.data.length; index++) {
					goods.push(resp.data[index].name)
					this.myid[resp.data[index].name] = resp.data[index].id
				}
				this.goods = goods;
				this.good_value = goods
				console.log(goods)
			})
		},


		//定义画中画切换
		changepic(){
			//判断是否处于画中画状态，这里用的是id选择器
			if (videopic !==  document.pictureInPictureElement) {
				//尝试进入画中画
				videopic.requestPictureInPicture()
				this.mybutton = '退出画中画'
			}else{
				//退出画中画
				document.exitPictureInPicture()
				this.mybutton = '进入画中画'
			}
		},

		//获取凭证
		get_uptoken(){
			this.axios({
				url:'http://127.0.0.1:8000/uptoken/'
			}).then(resp=>{
				// console.log(resp)
				this.qiniu_token = resp.data.token
				// console.log(this.qiniu_token)
				
			})
		},
		//上传七牛
		upload_qiniu(e){
			//获取文件对象
			let file = e.target.files[0];
			//截取文件后缀名
			let suffix = file.name.split(".").pop()
			//声明参数
			let param = new FormData();
			//添加文件&上传凭证
			param.append("token",this.qiniu_token)
			param.append('file',file,file.name);
			//声明请求头
			let config = {
				headers:{'Content-Type':'multipart/form-data'}
			}
			//判断文件后缀名是图片还是视频
			if (this.img_list.indexOf(suffix)>-1) {
				//定制化axios
				//七牛上传强制要求不能携带cookie，因此定制化axios保险起见，声明不携带cookie
				const axios_qiniu = this.axios.create({withCredentials:false})
				axios_qiniu({
					method:"POST",
					url:'http://up-z1.qiniu.com/',
					data:param,
					timeout:30000,
					//上传进度
					onUploadProgress: (event)=> {
						//LoadPercent 是上传进度，可以用来添加进度条  已上传字节数/总字节数
						var complete = (event.loaded / event.total);
						//安慰剂按钮
						if (complete < 1) {
							this.LoadPercent = (complete *100).toFixed(2)+ '%';
							
							this.loadpercent_int = parseInt((complete * 100).toFixed(2));
						}
					}
				}).then(resp=>{
					// console.log(resp)
						this.src = 'http://q79ixndz4.bkt.clouddn.com/'+resp.data.key
						this.LoadPercent = '100%';
						this.loadpercent_int = 100;
						this.axios({
							//更新数据库用户头像
							url:'http://127.0.0.1:8000/updateimg_qiniu/',
							params:{
								'img':resp.data.key,
								'username':localStorage.getItem("username"),
							},
						}).then(result=>{
							// console.log(result.data.message)
						})
				}).catch(error=>{
					// console.log(error)
				})
			}
			//判断后缀名为视频时：
			else if(this.video_list.indexOf(suffix)>-1){
				//定制化axios
				//七牛上传强制要求不能携带cookie，因此定制化axios保险起见，声明不携带cookie
				const axios_qiniu = this.axios.create({withCredentials:false})
				axios_qiniu({
					method:"POST",
					url:'http://up-z1.qiniu.com/',
					data:param,
					timeout:30000,
					onUploadProgress: (event)=> {
						//LoadPercent 是上传进度，可以用来添加进度条
						var complete = (event.loaded / event.total);
						if (complete < 1) {
							this.LoadPercent = (complete *100).toFixed(2)+ '%';
							this.loadpercent_int = Number((complete *100).toFixed(2));
						}
					}
				}).then(resp=>{
					// console.log(resp)
					this.video = 'http://q79ixndz4.bkt.clouddn.com/'+resp.data.key
					this.LoadPercent = '100%';
					this.loadpercent_int = 100;
				})
			}
		},
		submit(){
			if (this.password != this.password1) {
				this.$Message("两次输入密码不一致！")
				return false
			}
			let username = localStorage.getItem('username')
			this.axios({
				method:"GET",
				url:'http://127.0.0.1:8000/usermodify/',
				params:{
					password:this.password,
					username:username
				}
			}).then(resp=>{
				// console.log(resp)
				this.$Message(resp.data.message)
			}).catch(error=>{
				// console.log(error)
			})
		},
		//提交
		upload(e){
			//获取文件对象
			let file = e.target.files[0];
			//声明参数
			let param = new FormData();
			//添加文件
			param.append('file',file,file.name);
			//声明请求头
			let config = {
				headers:{'Content-Type':'multipart/form-data'}
			}
			//发送请求
			this.axios.post('http://127.0.0.1:8000/uploadfile/',param,config)
			.then(resp=>{
				// console.log(resp);
				//进行src的赋值操作
				this.src = 'http://localhost:8000/static/upload/'+resp.data.filename;

			}).catch(error=>{
				// console.log(error)
			})
		},
    },
}


</script>


<style>
	td{padding: 5px;}


</style>